<template>
    <div class="hello">
        <ul>
            <router-link :to="{path: '/detail', query: {bookId: item.bookid}}" v-for="item in data.pagedata" :key="item.bookid">
                <li>
                    <div class="bookInfoItem">
                        <div class="bookCover">
                            <img :src="item.bookcover"/>
                        </div>
                        <div class="bookInfo">
                            <p class="bookInfoTop">
                                <span class="bookName">{{item.bookname}}</span>
                                <span class="readCount">{{item.readcount}}人阅读</span>
                            </p>
                            <p class="bookSynopsis">{{item.title}}</p>
                            <p>
                                <span class="bookAuthor">{{item.author}}</span>
                            </p>
                        </div>
                    </div>
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Choice",
        data() {
            return {
                msg: "Welcome to Your Vue.js App",
                data: {
                    pagedata: []
                }
            };
        },
        created() {
            this.getChoiceList();
        },
        methods: {
            async getChoiceList() {
                console.log("temp= ", this.temp)
                await this.$axios({
                    method: "get",
                    url: "/api/newbookinfo/get-newMediaList",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        accounttoken: "c0bc5c335284998f4520de0c47ccc8bf",
                    },
                    params: {
                        userid: "33003",
                        page: 1,
                        pagesize: 20,
                        maleChannel: 0
                    }
                }).then(response => {
                    console.log("response", response);
                    const data = response.data;
                    this.data = data;
                    console.log('data=', data);
                    const pageData = data.pagedata;
                    this.data.pagedata = pageData;
                    console.log('pageData=', pageData);
                    console.log("this.data.pagedata= ", this.data.pagedata);
                }).catch(error => console.log(error, "error"));
            }
        }
    }
</script>

<style scoped>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    ul li {
        list-style: none;
        text-align: left;
    }

    a {
        text-decoration: none;
        outline: 0;
    }

    .bookInfoItem {
        position: relative;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .bookCover {
        width: 80px;
        height: 100px;
        position: absolute;
        overflow: hidden;
    }

    .bookCover img {
        width: 80px;
        height: 100px;
    }

    .bookInfo {
        height: 100px;
        margin-left: 90px;
        position: relative;
    }

    .bookInfoTop {
        margin: 0;
    }

    .bookName {
        font-size: 14px;
        color: #424242;
    }

    .readCount {
        float: right;
        font-size: 10px;
        color: #A9A9A9;
    }

    .bookSynopsis {
        font-size: 12px;
        margin-top: 5px;
        color: #424242;
    }

    .bookAuthor {
        font-size: 10px;
        color: #A9A9A9;
    }
</style>